<template>
  <view class="down-bar row sticky-box" @touchmove.stop.prevent="()=>{}">
    <view class="one" v-for="(item,index) in showList" :key="index" @click="clickDownView(item)">
      <view class="center" :class="{active:item.active || (item.id || item.id === 0) || item.categoryId}">
        <text>{{item.name}}</text>
        <text class="iconfont icon-down1" v-show="!item.active"></text>
        <text class="iconfont icon-up" v-show="item.active"></text>
      </view>

      <view class="item-list" v-show="item.active">
       <view class="category" v-if="item.isCategory">
          <category :infoValue="item" @searchByLabel="searchByLabel"></category>
       </view>
        <view class="name" :class="{active:info.name === item.name}" v-else v-for="(info,i) in item.list" :key="i" @click.stop="changeInfo(item,info)">{{info.name}}</view>
      </view>

      <!-- 蒙层 -->
      <view class="cover" v-show="item.active"></view>
    </view>

  </view>
</template>

<script setup lang="ts">
  import category from "@/pages/category/category.vue"
  import {ref,reactive,toRefs,watch} from 'vue'
  const props = defineProps({
    params:{
      type:Object,
      default:null
    },
    downBars: {
      type: Array,
      default: () => [{
          type: 'sort',
          name: '综合排序',
          active: false,
          list: [{
              id: 'default',
              name: '综合排序'
            },
            {
              id: 'new',
              name: '最新排序'
            },
            {
              id: 'hot',
              name: '热门排序'
            }
          ]
        },
        {
          type: 'label',
          name: '全部分类',
          active: false,
          isCategory: true
        }
      ]
    }
  })
  const state = reactive({
    params:{
      type:'',
      id:0
    }
  })
  const emit = defineEmits(['search'])

 
// 转换成响应式数据进行渲染
  const showList = reactive([])
  props.downBars.forEach(item => {
    showList.push(item)
  })
  
  // 监听从  tab的分类页面  的点击标签信息  跳转过来 在  全部分类的 选择tabbar  展示对应的跳转标签信息
  watch(()=>props.params,(newValue)=>{
   	if(newValue && newValue.name){
       const obj =  showList[showList.length - 1]
       obj.name = newValue.name
       obj.id = newValue.labelId
        obj.activeIndex = newValue.activeIndex
       return
     }
   },{immediate:true})
  
  
  // 下拉标题选择的点击事件
  const clickDownView = (item)=>{
    showList.forEach(i => {
      i.active = (item === i) ? !item.active : false
    })
  }
  
  // 排序的下拉选择框的点击响应事件
  const changeInfo = (item,info)=>{
    // 点击重复则不进行重复操作
    if(item.name === info.name) return
    // 修改展示数据
    item.name = info.name
    item.id = info.id
    // 保存点击发送的参数数据
    state.params.type = item.type
    state.params.id = info.id
    clickDownView(item)
    emit('search',state.params)
  }
  
  // 全部分类下的标签点击事件
  const searchByLabel = (item)=>{
    //选择分类标签后关闭下拉框
   clickDownView(item.active)
   emit('search',{labelId:item.id,categoryId:item.categoryId})
  }
  
 </script>

<style lang="scss" scoped>
  .down-bar {
    z-index: 120;
    background-color: #FFF;
    font-size: 30rpx;
    line-height: 80rpx;
  }

  .item-list {
    z-index: 100;
    background-color: #FFF;
    position: absolute;
    left: 0;
    right: 0;

    .name {
      padding-left: 80rpx;
    }

    .category {
      height: 580rpx;
    }
  }

  .active {
    color: $mxg-text-color-blue;
  }

  .sticky-box {
    position: -webkit-sticky;
    position: sticky;
    top: var(--window-top);
  }

  .cover {
    z-index: 79;
    position: fixed;
    left: 0;
    right: 0;
    top: 260rpx;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.2 !important;
  }
</style>
